<template>
  <div class="app-container">
    <el-button type="primary" style="background: blue;" @click="addFlag=true">添加角色</el-button>
    <div class="table_wrap">
      <el-table :data="roleList">
        <el-table-column label="角色">
          <template slot-scope="scope">
            <div>
              <div v-if="isEditId!=scope.row.id"> {{ scope.row.name }}</div>
              <el-input v-else v-model="scope.row.name" />
            </div>
          </template>

        </el-table-column>
        <el-table-column label="启用">
          <template slot-scope="scope">
            <div>
              <div v-if="isEditId!=scope.row.id"> {{ scope.row.state==1?'已启用':'未启用' }}</div>
              <el-switch v-else v-model="scope.row.state" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <div>
              <div v-if="isEditId!=scope.row.id">{{ scope.row.description }}</div>
              <el-input v-else v-model="scope.row.description" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- scope可以获取当前行的数据 -->
          <template slot-scope="scope">
            <div>
              <div v-if="isEditId!=scope.row.id">
                <el-link type="primary">分配权限</el-link>
                <el-link type="primary" style="margin:0 8px;" @click="toEdit(scope.row.id)">编辑</el-link>
                <el-link type="primary" @click="toDel(scope.row.id)">删除</el-link>
              </div>
              <div v-else>
                <el-button type="primary" sytle="background:blue" @click="sure_edit(scope.row)">确定</el-button>
                <el-button type="danger" @click="quitEdit"> 取消</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_wrap">
        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="pageChange"
        />
      </div>
    </div>
    <!-- 添加弹出层组件 -->
    <el-dialog
      width="40%"
      title="添加角色"
      :visible.sync="addFlag"
    >
      <el-form
        ref="myform"
        label-width="80px"
        class="myform"
        :model="roleObj"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleObj.name" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="roleObj.state" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="roleObj.description"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: blue;" @click="toAdd">确定</el-button>
          <el-button type="danger" @click="addFlag=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addRoleApi, getRoleApi, delRoleApi, updateRoleApi } from '@/api/role'
export default {
  data() {
    return {
      isEditId: '', // 正在编辑的id
      roleList: [], // 角色列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 总数据条数
      addFlag: false, // 控制添加弹出层的
      roleObj: { // 收集表单数据
        name: '', // 角色名称
        description: '', // 角色描述
        state: 0 // 状态 是否启用  1 启用 0 不启用
      },
      rules: { // 添加表单的验证规则
        name: [{ required: true, message: '角色名必填', trigger: 'blur' }],
        description: [
          { required: true, message: '角色名必填', trigger: 'blur' },
          { max: 20, min: 5, message: '角色不少于5个字', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    quitEdit() { // 取消编辑
      this.isEditId = ''
    },
    async sure_edit(row) { // 点击确定修改的时候调用
      const data = {
        name: row.name,
        description: row.description,
        id: row.id,
        state: row.state ? 1 : 0
      }
      const res = await updateRoleApi(data)
      console.log(res, '---------------')
      this.$message.success('更新数据成功')
      this.isEditId = ''// 清空正在编辑id 退出编辑模式
    },
    toEdit(id) { // 打开编辑模式
      this.isEditId = id// 存储正在编辑id
    },
    toDel(id) { // 删除角色功能
      this.$confirm('你确定删除这个角色吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delRoleApi(id) // 删除接口
        console.log(res, '888888888888')
        this.$message.success('删除成功')
        this.getRoleList() // 删除成功重新获取列表
      }).catch(() => {
        console.log('取消')
      })
    },
    pageChange(val) { // 分页改变事件
      console.log(val, '当前页码')
      this.page = val// 改变最新的页码传给后台
      this.getRoleList() // 改变页码后从新调用接口
    },
    async getRoleList() { // 获取角色列表接口
      const res = await getRoleApi({
        page: this.page, // 当前页码
        pageSize: this.pageSize,
        total: this.total
      })
      console.log(res, '^^^^^^^^^^')
      this.roleList = res.rows// 存储角色列表
      this.total = res.total // 存储数据总条数
    },
    toAdd() { // 调用添加角色接口
      // 调用表单的验证方法
      this.$refs.myform.validate(vali => {
        if (vali) { // vali 为true 所有表单项都通过了
          this.roleObj.state = this.roleObj.state ? 1 : 0
          console.log(this.roleObj)
          // 调用添加接口方法
          addRoleApi(this.roleObj).then(res => {
            console.log(res, '-------')
            // 调用表单自带的重置方法
            this.$refs.myform.resetFields()
            // 关闭弹出层
            this.addFlag = false
            this.$message.success('添加角色成功')
            this.getRoleList() // 添加成功重新获取列表
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .page_wrap{
    display: flex;
    justify-content: flex-end;
  }
  .myform{
    padding: 0 50px;
    box-sizing: border-box;
  }
</style>

